<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>捐赠管理</title>
    <style>
        body {
            overflow: hidden;
        }
        
        h1 {
            text-align: center;
            text-shadow: 2px 2px 5px rgba(50, 50, 50, .5);
        }
        
        a {
            text-decoration: none;
            color: #f33;
            text-shadow: 4px 4px 2px rgba(205, 68, 68, .5);
        }
        
        .main {
            margin: auto;
            width: 59%;
        }
        
        .main .search,
        .main .addPart {
            display: flex;
            padding: 5px;
            border: 1px solid #0094ff;
        }
        
        .main .search>*,
        .main .addPart>* {
            display: flex;
            margin: 0 5px;
        }
        
        #pageSpan {
            margin: 0 10px;
        }
        
        table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
        }
        
        table,
        th,
        td {
            border: 1px solid #000;
        }
        
        table thead tr {
            background-color: #0094ff;
            color: #fff;
            font-size: 18px;
        }
        
        table th,
        table td {
            width: 100px;
            padding: 15px 0;
        }
        
        .oper {
            width: 100px;
        }
        
        .modiInput {
            width: 40%;
            height: 100%;
            color: #0094ff;
            font-weight: 700;
            transform: scale(1.3);
        }
        
        .del,
        .modi,
        .sure,
        .cancel {
            display: block;
            float: left;
            width: 50%;
        }
    </style>
</head>

<body>
    <h1>捐赠管理</h1>
    <div class="main">
        <div class="search">
            受捐企业：<select id="company"><option value="">全部企业</option>
            </select>
            <button id="btnSr">查询</button>
            <button id="btnPageUp">上一页</button>
            <button id="btnPageDown">下一页</button>
            <span id="pageSpan"></span>
        </div>
        <div class="addPart">
            <label>捐赠人：<input type="text"></label>
            <label>受捐企业：<select id="donateCompany"><option value="0">请选择</option> </select>
            </label>
            <label>金额：<input type="number"></label>
            <label>受捐日期：<input type="date"></label>
            <button id="btnAdd">新增</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>捐赠人</th>
                    <th>受捐企业</th>
                    <th>金额</th>
                    <th>受捐日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</body>
<script src="./js/localStorage.js"></script>
<script src="./js/Donate.js"></script>
<script>
    let donate = new Donate();
    let addPart = document.querySelector('.main .addPart');
    let searchPart = document.querySelector('.main .search');
    let btnSrch = searchPart.querySelector('#btnSr');
    let selCompany = searchPart.querySelector('#company');
    let pP = searchPart.querySelector('#btnPageUp');
    let nP = searchPart.querySelector('#btnPageDown');
    let labels = addPart.querySelectorAll('label');
    let btnAdd = addPart.querySelector('#btnAdd');
    let tb = document.querySelector('.main table tbody');
    //清空本地储存,如果需要可以清空
    // localStorage.clear();
    //上一页按钮的事件
    pP.addEventListener('click', prePage);
    //下一页按钮的事件
    nP.addEventListener('click', nexPage);
    //查询按钮的事件
    btnSrch.addEventListener('click', searchData);
    //添加按钮的事件
    btnAdd.addEventListener('click', addData);
    //列表项的事件委托
    tb.addEventListener('click', clickTb);
    donate.showData(tb, 'donate');


    function searchData() {
        //获取select框的内容
        // console.log(donate.COMPANY[selCompany.selectedIndex - 1]);
        this.currentPage = 0;
        if (selCompany.selectedIndex) {
            donate.search = donate.COMPANY[selCompany.selectedIndex - 1];
            donate.showData(tb, 'company', donate.COMPANY[selCompany.selectedIndex - 1]);
        } else {
            donate.search = 'all';
            donate.showData(tb, 'donate');
        }
    }

    function prePage() {
        if (donate.currentPage > 0) {
            donate.currentPage--;
            donate.showData(tb);
        } else {
            alert('无法向上翻页了...');
        }
    }

    function nexPage() {
        if (donate.currentPage < donate.pageAll) {
            donate.currentPage++;
            donate.showData(tb);
        } else {
            alert('没有更多页了...');
        }
    }

    function addData() {
        let temp = [];
        for (val of labels) {
            if (!val.children[0].value.trim()) return alert('请完成内容填写');
            temp.push(val.children[0].value.trim());
        }
        donate.addDonater(temp[0], temp[1], temp[2], temp[3]);
        donate.showData(tb);
    }
    const SMONTH = [4, 6, 9, 11];

    function leapYear(x) {
        if (x % 100 === 0 && x % 400 === 0) return true;
        if (x % 4 === 0) return true;
        return false;
    }

    function dateA(t) {
        let v = t[0];
        let temp = v.split('-');
        if (temp.length !== 3) return false;
        if (temp[0] < 1900 || temp[0] > 2021 || temp[1] < 1 || temp[1] > 12 || temp[2] < 1 || temp[2] > 31) return false;

        let nowdate = new Date();
        let indate = new Date(v);
        if (indate.getTime() > nowdate.getTime()) return false;

        if (SMONTH.some(function(item) {
                item === temp[1];
            }) && temp[2] > 30) return false;

        if (temp[1] === 2) {
            if (leapYear(temp[0]) && (temp[2] > 29)) return false;
            if (temp[2] > 28) return false;
        }
        temp[1] = temp[1] < 10 ? `0${+temp[1]}` : temp[1];
        temp[2] = temp[2] < 10 ? `0${+temp[2]}` : temp[2];
        t[0] = temp.join('-');

        return true;
    }
    let ok = 1; //修改是否合法的判断标识
    function clickTb(e) {
        if (e) {
            let temp = e.target.parentElement.parentElement.children;
            switch (e.target.className) {
                case 'del':
                    donate.delData(temp, e.target.parentElement.dataset.index); //移除该行数据
                    donate.showData(tb);
                    break;
                case 'modi':
                    if (donate.currentModi) {
                        donate.backShow(tb);
                        let cd = tb.children[donate.currentModi].children;
                        modi(cd[cd.length - 1].children, 0)
                    }
                    donate.currentModi = e.target.parentElement.dataset.index;
                    for (let index = 1; index < temp.length - 1; index++) {
                        if (index === 2) continue;
                        temp[index].innerHTML = `<input type="text" class="modiInput" index="${index}" value="${temp[index].innerHTML}"/>`;
                        if (index === temp.length - 2) {
                            let ipt = temp[index].querySelector('.modiInput');
                            ipt.onfocus = function() {
                                ok = 0;
                            }
                            ipt.onblur = function() {
                                let dateReg = /^\d{4}-\d{1,2}-\d{1,2}$/;
                                let arr = [];
                                arr[0] = ipt.value;
                                if (dateReg.test(ipt.value) && dateA(arr)) {
                                    ipt.value = arr[0];
                                    ok = 1;
                                }
                            }
                        }
                    }
                    let st = temp[2].innerHTML;
                    temp[2].innerHTML = `<select class="modiInput"></select>`;
                    donate.loadCompany(temp[2].children[0], donate.COMPANY, st);
                    modi(e.target.parentElement.children, 1);
                    break;
                case 'sure':
                    if (!ok) {
                        alert('日期有问题！');
                        break;
                    }
                    for (let index = 1; index < temp.length - 1; index++) {
                        temp[index].innerHTML = `${temp[index].children[0].value}`;
                    }
                    donate.modiData(e.target.parentElement.dataset.index, temp);
                case 'cancel':
                    donate.showData(tb);
                    donate.currentModi = 0;
                    modi(e.target.parentElement.children, 0);
                    break;
            }
        }
    }

    function modi(arr, op) {
        switch (op) {
            case 0:
                arr[0].className = 'del';
                arr[0].innerHTML = `删除`;
                arr[1].className = 'modi';
                arr[1].innerHTML = `修改`;
                break;
            case 1:
                arr[0].className = 'sure';
                arr[0].innerHTML = `确定`;
                arr[1].className = 'cancel';
                arr[1].innerHTML = `取消`;
                break;
        }
    }
</script>

</html>